<template>
  <div class="home">
    <h1>热门目的地</h1>
    <div class="destination-grid">
      <div v-for="dest in destinations" :key="dest.id" class="destination-card">
        <img :src="dest.imageUrl" :alt="dest.name">
        <div class="destination-info">
          <h3>{{ dest.name }}</h3>
          <p>{{ dest.city }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useHome } from '@/ts/pages/home'
import '@/css/pages/home.css'

const { destinations } = useHome()
</script> 